<template>
    <div v-for="item in merchants" @click="DetailJump(item.query)" class="marketers">
        <img :src="item.imgUrl" alt=""><!--商家图片-->
        <div class="font">
            <div class="name">
                <div v-if="item.isBao">爆红包</div><!--爆红包-->
                <span class="h4">{{item.name}}</span><!--商家名字-->
            </div>
            <p v-for="s in item.scores" class="power">
                <span class="score twelve">{{s.score}}分</span><!--评分-->&nbsp
                <span class="span twelve">月售{{s.sales}}</span><!--月售-->
                <span class="span twelve right">{{s.minute}}分钟 &nbsp {{s.meter}}m</span><!--配送时间、距离-->
            </p>
            <span v-for="m in item.deliveries">
                <span class="span twelve">起送￥{{m.start}} &nbsp 配送￥{{m.delivery}}</span>
                <span class="span twelve" style="text-decoration:line-through">{{m.original}}</span>
                <!--起送费、配送费-->
            </span>
            <div class="assess">
                <div class="twelve backdrop">{{item.appraise}}</div><!--客户评价-->
                <div class="twelve backdrop">{{item.official}}</div><!--官方评价-->
            </div>
            <div class="rebate">
                <div v-if="item.isBao" class="twelve border bao"><p>爆</p>{{item.bao}}</div>
                <div class="twelve border">{{item.concessionary.join('|')}}</div><!--折扣券-->
                <div class="twelve golden" v-if="item.aureate">{{item.aureate}}</div><!--无门槛券-->
                <div class="twelve border" v-if="item.packets">{{item.packets}}</div><!--店铺券-->
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DetailCom",
        props: {merchants: Array},
        data() {
            return {}
        },
        methods: {
            DetailJump(query) {
                this.$router.push(`/detail-view?query=${query}`)
            }
        }
    }
</script>

<style scoped>
    .twelve {
        font-size: 12px
    }

    .marketers {
        width: 94vw;
        height: 100px;
        display: flex;
        position: relative;
        margin: auto;
        padding-bottom: 15px;
    }

    .marketers > img {
        height: 100px;
        width: 100px
    }

    .font {
        width: 65vw;
    }

    .name {
        display: flex;
        position: absolute;
        white-space: nowrap;

    }

    .name > div {
        font-size: 12px;
        background-color: #fc3030;
        color: white;
        border-radius: 5px;
        line-height: 20px;
    }

    .h4 {
        /*position: absolute;*/
        font-weight: bold;
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        /*top: 3px;*/
    }

    .power {
        top: 3px;
        margin-top: 21px;
        margin-bottom: 0;
    }

    .score {
        color: #ff8a4a
    }

    .span {
        color: lightgrey
    }

    .right {
        position: absolute;
        right: 5px;
        line-height: 21px;
    }

    .assess {
        display: flex;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #ff8a4a;
        padding-bottom: 3px;
    }

    .backdrop {
        background-color: #f5af99;
        border-radius: 5px;
        margin-right: 5px;
    }

    .rebate {
        display: flex;
    }

    .border {
        border: 1px #fc3030 solid;
        border-radius: 5px;
        margin-right: 5px;
        color: #fc2929;
    }

    .bao {
        display: flex;
    }

    .bao > p {
        font-size: 14px;
        margin: 0;
        margin-right: 8px;
    }

    .golden {
        color: gold;
        border: 1px gold solid;
        border-radius: 5px;
        margin-right: 5px;
    }
</style>